<script>
import { useNodeTreeStore } from 'src/stores/nodeTree';
import { defineComponent, computed } from 'vue';
// import
export default defineComponent({
  name: 'RenderCom',
  props: {
    node: {
      type: Object,
    },
  },
  setup(props) {
    const nodeTreeStore = useNodeTreeStore();
    const treeNode = computed({
      get() {
        return nodeTreeStore.treeMap[props.node.id] || {};
      },
      set(val) {
        nodeTreeStore.treeMap[props.node.id] = val;
      },
    });
    // if(nodeTreeStore.treeMap[props.node.parentId].type === 'group'){
    // }
    // const pageWidth = inject('pageWidth');
    // const pageHeight = inject('pageHeight');
    const layout = computed({
      get: () => {
        return nodeTreeStore.treeMap[props.node.id]?.layout || {};
      },
      set: (val) => {
        nodeTreeStore.treeMap[props.node.id].layout = val;
      },
    });
    const setActive = () => {
      nodeTreeStore.setActiveNode(props.node);
      nodeTreeStore.setContextMenu(false);
    };
    const onDelete = () => {
      nodeTreeStore.deleteNode(props.node);
    };
    const isActive = computed(() => {
      return nodeTreeStore.activeNode?.id === props.node.id;
    });
    const mousedown = () => {
      setActive();
    };
    return {
      nodeTreeStore,
      layout,
      onDelete,
      isActive,
      mousedown,
      setActive,
      treeNode,
    };
  },
});
</script>
<template>
  <div>
    <template v-if="node.type === 'node'">
      <component
        @mousedown="mousedown"
        :style="{
          zIndex: node.layout.zIndex,
          width: node.layout.width + 'px',
          height: node.layout.height + 'px',
          transform: `translate(${node.layout.x}px, ${node.layout.y}px) rotate(${node.layout.rotate || 0}deg)`,
          position: 'absolute',
          left: 0,
          top: 0,
        }"
        class="node"
        :node="node"
        :is="node.name"
      ></component>
      <!-- <div
        @mousedown="mousedown"
        :style="{
          zIndex: node.layout.zIndex,
          width: node.layout.width + 'px',
          height: node.layout.height + 'px',
          transform: `translate(${node.layout.x}px, ${node.layout.y}px) rotate(${node.layout.rotate || 0}deg)`,
          position: 'absolute',
          left: 0,
          top: 0,
        }"
        class="group_node"
      ></div> -->
    </template>
    <template v-if="node.type === 'group'">
      <component :node="node" :is="node.name"></component>
      <div
        @mousedown="mousedown"
        :style="{
          zIndex: nodeTreeStore.activeNode?.id === node.id ? node.layout.zIndex : 1,
          width: node.layout.width + 'px',
          height: node.layout.height + 'px',
          transform: `translate(${node.layout.x}px, ${node.layout.y}px) rotate(${node.layout.rotate || 0}deg)`,
          position: 'absolute',
          left: 0,
          top: 0,
        }"
        class="group_node"
      ></div>
    </template>
    <Teleport to="#layout-form" defer v-if="isActive">
      <q-form>
        <q-toolbar class="tw-text-black rounded-borders">
          <q-toolbar-title><q-input v-model="treeNode.label"></q-input></q-toolbar-title>
          <q-btn-group padding="sm" class="fab-btn" square flat dense>
            <q-btn square flat @click="onDelete" dense color="negative" icon="delete" />
          </q-btn-group>
        </q-toolbar>
        <div class="q-pa-sm row q-gutter-sm">
          <q-input class="col-5" v-model.number="layout.width" type="number" label="宽" />

          <q-input class="col" v-model.number="layout.height" type="number" label="高" />
        </div>
        <div class="q-pa-sm row">
          <q-btn-group class="col row">
            <q-btn
              class="col"
              label="与父同宽"
              @click="layout.width = nodeTreeStore.treeMap[treeNode.parentId].layout.width"
            ></q-btn>
            <q-btn
              class="col"
              label="与父同高"
              @click="layout.height = nodeTreeStore.treeMap[treeNode.parentId].layout.height"
            ></q-btn>
          </q-btn-group>
        </div>

        <div class="q-pa-sm row q-gutter-sm">
          <q-input class="col" v-model.number="layout.x" type="number" label="x" />
          <q-input class="col" v-model.number="layout.y" type="number" label="y" />
        </div>
        <div class="q-pa-sm row">
          <q-btn-group class="col row">
            <q-btn
              class="col"
              label="贴合父元素X"
              @click="layout.x = nodeTreeStore.treeMap[treeNode.parentId].layout.x"
            ></q-btn>
            <q-btn
              class="col"
              label="贴合父元素Y"
              @click="layout.y = nodeTreeStore.treeMap[treeNode.parentId].layout.y"
            ></q-btn>
          </q-btn-group>
        </div>
        <div v-if="treeNode.type !== 'group'" class="q-pa-sm row q-gutter-sm">
          <q-input class="col" v-model.number="layout.zIndex" type="number" label="层级" />
          <q-input class="col" v-model.number="layout.rotate" type="number" label="旋转角度" />
        </div>
      </q-form>
    </Teleport>
  </div>
  <!-- 右键点击 -->
</template>
<style scoped lang="scss">
.node {
  &:hover {
    box-shadow:
      1px 1px 1px $primary,
      -1px -1px 1px $primary;
  }
}
.group_node {
  &:hover {
    border: 2px solid $primary;
  }
}
// // 定义resizes
$resizes: (n-resize, s-resize, e-resize, w-resize, ne-resize, se-resize, sw-resize, nw-resize);
// // 遍历resizes
@each $res in $resizes {
  .#{$res} {
    position: absolute;
    width: 8px;
    height: 8px;
    background: $primary;
    border: 1px solid $primary;
    border-radius: 50%;
    z-index: 1;
  }
  .node.#{$res}:hover {
    border: 1px dashed $primary;
  }
}
.active_node {
  border-color: $primary;
}
</style>
